<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>语义化HTML</h1>
        <nav>
            <ul>
                <li><a href="#importance">语义化(Semantic)的重要性</a></li>
                <li><a href="#semantic">语义化标签</a></li>
            </ul>
        </nav>
        <hr>
        <main>
            <section id="importance">
                <h2>语义化(Semantic)的重要性</h2>
                <p>对于标题标签 h1 - h6 保证结构层级的正确性</p>
                <p>展示性(Presentational) HTML标签 仅仅用于设定元素的样式，已被弃用</p>
                <p>语义化HTML标签 控制语义和HTML的结果</p>
            </section>
            <section id="semantic">
                <h2>语义化标签</h2>
                <article>
                    <h3>header</h3>
                    <p></p>
                </article>
            </section>
        </main>
    </header>
</body>
</html>